<template>
  <view class="page">
    <text class="h1 text-size-1">个人健康问卷</text>
    <view class="flex-h flex-h--vertical-baseline">
      <text class="h3 text-size-4">进行问卷调查以获得针对您个人的健康建议</text>
    </view>
    <view class="flex-h flex-h--vertical-baseline">
      <text class="h3">文朵健康团队联合国际顶级专家给客户定制健康执行方案</text>
    </view>
    <view class="flex-h flex-h--vertical-baseline">
      <text class="h3 text-size-4">从此您的健康我负责</text>
    </view>
    <text class="text-size-5">问卷调查信息仅用于为个人定制健康计划</text>
    <view
      :class="`flex-h flex-h--vertical-center padding-v--small ${
        noticeAgreementCheck ? 'noticeAgreementCheck' : ''
      }`"
      @tap="toggleAgree"
    >
      <view
        class="toggle margin-r--small"
        :class="{ 'toggle--unchecked': !isAgreementChecked }"
      >
        <view class="check"></view>
      </view>
      <text class="text-size-5">同意</text>
      <text class="text-size-5 link" @tap="goPrivacyPolicy">
        《文朵健康隐私协议》
      </text>
    </view>
    <view class="section-v">
      <view
        v-for="questionnaire in questionnaires"
        :key="questionnaire.id"
        class="wave-container card-a"
        @tap="gotoSpecificQuestionnaire(questionnaire.type)"
      >
        <text>{{ questionnaire.title }}</text>
        <text>50积分</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { healthy } from "../../../apis";
import { HealthQuestionnaireWrapper } from "../../../types";
import { TaroResponseWrapper } from "../../../types";
import { request } from "../../../services/http-base";
export default {
  data() {
    return {
      questionnaires: [],
      isAgreementChecked: false,
      noticeAgreementCheck: false,
    };
  },
  methods: {
    gotoSpecificQuestionnaire(questionnaireType: String) {
      if (this.isAgreementChecked) {
        return Taro.redirectTo({
          url: `/pages/user-info/index?type=${questionnaireType}`,
        });
      }
      return (this.noticeAgreementCheck = true);
    },
    toggleAgree() {
      this.isAgreementChecked = !this.isAgreementChecked;
    },
    goPrivacyPolicy(e) {
      e.stopPropagation();
      Taro.navigateTo({ url: "/pages/privacyPolicy/index" });
    },
  },
  watch: {
    isAgreementChecked(v) {
      if (v) {
        this.noticeAgreementCheck = false;
      }
    },
  },
  async mounted() {
    let result: TaroResponseWrapper<HealthQuestionnaireWrapper> = await request(
      healthy
    );
    this.questionnaires = result.data.data.pages;
    this.$store.commit("setQuestionnaires", this.questionnaires);
  },

  // onLoad
  onLoad() {},

  // onReady
  onReady() {},

  // 对应 onShow
  onShow() {},

  // 对应 onHide
  onHide() {},

  // 对应 onPullDownRefresh
  onPullDownRefresh() {},
};
</script>
